<!-- name -->
<template>
  <div class='container'>
    <div class="video">
      <div class="upload">
        <div class="add">
          <p class="heng"></p>
          <p class="shu"></p>
        </div>
        <div class="text">{{isLive?'设置直播封面':'上传视频'}}</div>
        <div class="text" v-show="isLive">建议尺寸710*300</div>
      </div>
      <div class="videotit">
        {{isLive?'直播间ID':'视频名称'}}
        <input v-if="!isLive" type="text" v-model="videoTitle" class="phcolor" placeholder="不超过20个字符">
        <p v-else class="phcolor">6698756</p>
      </div>
    </div>
    <div class="video" v-if="isLive">
      <div class="zhiboTit">
        直播标题
        <input  type="text" v-model="videoTitle" maxlength='20' class="phcolor" placeholder="不超过20个字符">
      </div>
    </div>
    <div class="video">
      <p>{{isLive?'直播':''}}推荐简介<span class="tip">（非必须）</span></p>
      <textarea
        v-model="introduction"
        class="input-area"
        maxlength='100'
        placeholder="不超过100个字符"
        placeholder-class="placeholder-part"
      ></textarea>
    </div>
    <div class="video">
      <picker :mode="pikerType" @change="startTimeChange">
        <div class="catogary">
          <p>开始时间</p> 
            <p class="tip" style="font-size:15px" v-if="!startDate&&!startTime">请选择
              <img class="more" src="https://akk.028wkf.cn/kdb-weapp-img/icon/xzlm.png" mode="scaleToFill">
            </p>
            <p v-else class="picker">
              {{startDate}} {{startTime}}
            </p>
        </div>
      </picker>
    </div>  
    <div class="video">
      <picker :mode="pikerType" @change="endTimeChange">
        <div class="catogary">
          <p>结束时间</p> 
          <p class="tip" style="font-size:15px" v-if="!endDate&&!endTime">请选择
            <img class="more" src="https://akk.028wkf.cn/kdb-weapp-img/icon/xzlm.png" mode="scaleToFill">
          </p>
          <p v-else class="picker">
            <span>{{endDate}} {{endTime}}</span>
          </p>
        </div>
      </picker>
    </div>
    <div class="video">
      <div class="catogary">
        <p>直播分类</p> 
        <p>美妆分类
          <img class="more" src="https://akk.028wkf.cn/kdb-weapp-img/icon/xzlm.png" mode="scaleToFill">
        </p>
      </div>
    </div>
    <div class="video">
      <div class="catogary">
        <p>关联商品 0件</p> 
        <p class="tip" style="font-size:15px">请选择
          <img class="more" src="https://akk.028wkf.cn/kdb-weapp-img/icon/xzlm.png" mode="scaleToFill">
        </p>
      </div>
    </div>
    <div class="video" v-if="isLive">
      <div class="catogary">
        <p>录制直播</p> 
        <switch :checked="recording" @change="switchChange"/>
      </div>
    </div>
    <button class="btn">确定</button>
  </div>
</template>

<script>
import { getCurrentPageParams } from '@/utils'
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  // 接受父组件的传值
  props: {},

  data () {
    // 这里存放数据
    return {
      videoTitle: '', // 视频标题/直播标题
      introduction: '', // 视频简介/直播简介
      isLive: false, // 是否是直播（从上个页面传过来的）
      recording: true, // 是否录制直播
      startDate: '',
      startTime: '',
      endDate: '',
      endTime: '',
      pikerType: 'date' // 选择器的类型
    }
  },
  // 监听属性 类似于data概念
  computed: {
  },
  // 监控data中的数据变化
  watch: {},
  onShow () {
    if (getCurrentPageParams('isLive') === 'true') {
      this.isLive = true
    } else {
      this.isLive = false
    }
  },
  // 方法集合
  methods: {
    switchChange (e) {
      this.recording = e.target.value
    },
    startTimeChange (e) {
      if (this.pikerType === 'date') {
        this.startDate = e.target.value
        this.pikerType = 'time'
      } else {
        this.startTime = e.target.value
        this.pikerType = 'date'
      }
    },
    endTimeChange (e) {
      if (this.pikerType === 'date') {
        this.endDate = e.target.value
        this.pikerType = 'time'
      } else {
        this.endTime = e.target.value
        this.pikerType = 'date'
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.container{
  padding: 1px 0;
}
.video{
  margin: 10px 15px;
  background: #ffffff;
  border-radius: 5px;
  box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.07);
  padding: 10px;
  .upload{
    height: 200px;
    background: #F2F3F7;
    padding: 53px 0;
    .add{
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: #ffffff;
      text-align: center;
      line-height: 60px;
      position: relative;
      margin: 0 auto;
      .heng{
        width: 30px;
        height: 1px;
        background: #bbbbbb;
        position: absolute;
        top: 30px;
        left: 15px;
      }
      .shu{
        width: 1px;
        height: 30px;
        background: #bbbbbb;
        position: absolute;
        top: 15px;
        left: 30px;
      }
    }
    .text{
      text-align: center;
      margin-top: 15px;
      color: #DDDDDD;
    }
  }
  .videotit{
    display: flex;
    margin-top: 15px;
    justify-content: space-between;
    align-items: center;
  }
  input{
    margin-left: 10px;
    width: 240px;
  }
  .phcolor{
    text-align: right;
    font-size: 12px;
  }
  .zhiboTit{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .tip{
    color: #999999;
    font-size: 12px;
  }
  .input-area{
    width: 95%;
    font-size: 14px;
    background: #f2f3f7;
    padding-left: 6px;
    padding-top: 10px;
    margin-top: 10px;
  }
  .catogary{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .more{
      width: 5px;
      height: 10px;
    }
  }
}
.btn{
  width: 345px;
  height: 50px;
  background: #4673f7;
  border-radius: 5px;
  color: #ffffff;
  margin: 10px 15px;
}
</style>